
<template>
    <div class="page searchbar-result com-border-bottom" id="searchResult" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);" v-if="searchList">
        <ul class="user-list">
            <li v-for="item in items" class="mod-user com-border-bottom">
                <a @click="tokqCalendar(item.user_id)">
                    <img v-if="item.avatar" class="avatar" :src="item.avatar" alt="">
                    <img v-else  class="avatar" src="../../static/imgs/avatar.png">
                    <div class="info">
                        <p class="name">{{item.user_name}}</p>
                        <p class="team">{{item.group_name}}</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div v-show="searching" class="mod-empty new_mod-empty">
        <div class="search_tip">你可以搜索</div>
        <div class="searchName">
            <img src="../../static/imgs/icons/icon_8.png" class="searchName_img">
            <p class="searchName_tip">姓名</p>
        </div>
        <div class="line"></div>
        <div class="searchPhone">
            <img src="../../static/imgs/icons/icon_9.png" class="searchPhone_img">
            <p class="searchPhone_tip">手机号</p>
        </div>
    </div>
    <div v-show="noData" class="mod-empty new_mod-empty">
        <div class="icon icon_4"></div>
       <!--  <p class="tip">未搜索到<span style="color:rgb(255, 187, 0);">{{searchKey}}</span>相关人员</p> -->
       <p class="tip">什么都没有搜到耶</p>
    </div>
</template>
<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import clientUi from 'gapi/clientUi'
    import Empty from 'components/Empty/Empty'
    import * as util from 'js/util.js'
    import GroupUtil from 'js/GroupUtil.js'
    import searchApi from 'clientApi/searchPage'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
     let offset = 1 // 返回记录行的偏移量(从第几条数据开始取
     let rows = 10 // 返回记录行的最大条数（取的条数）
     let canLoadMore = 0
    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data(){
            return{
                items: [],
                status: '',
                loading: false,
                introMsg: false,
                noData: false,
                message:'没有搜索到该成员',
                userId: '',
                teamId: '',
                projectId: '',
                searching: true,
                searchList:false,
                searchKey: '',
                messageTitle: '人员搜索',//提示文字
                dataUrl: '',//请求接口
                inParam: {},//入参
                currentdate: '',
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
              this.teamId = util.getUrddataString('tid')
              this.projectId = util.getUrddataString('pid')
              let date = new Date();
              let seperator1 = "-";
              let year = date.getFullYear();
              let month = date.getMonth() + 1;
              let strDate = date.getDate();
              if (month >= 1 && month <= 9) {
                  month = "0" + month;
              }
              if (strDate >= 0 && strDate <= 9) {
                  strDate = "0" + strDate;
              }
              this.currentdate = year + seperator1 + month + seperator1 + strDate
              const setKeywords = (data) => {
                  this.searchKey = data.keyword
                  this.dataUrl = '/attendance/project_member/search'
                  this.inParam = {
                    team_id: this.teamId,
                    project_id: this.projectId,
                    key: data.keyword,
                  }
                  util.ajax({
                      url: this.dataUrl,
                      type: 'GET',
                      data: this.inParam,
                      timeout: 10000,
                      success: (obj) => { 
                        console.log('成员信息'+JSON.stringify(obj.data))
                          if(obj&&obj.errno == 0){
                              if(obj.data.length){
                                console.log('成员信息'+JSON.stringify(obj.data))
                                this.items = obj.data
                                this.noData = false;
                                this.searching = false
                                this.searchList = true
                              }else{
                                  this.noData = true;
                                  this.searchList = false;
                                  this.searching = false
                                  this.items = ['']
                              }
                          }else{
                              widget.toast(obj.errmsg)
                          }
                      },
                      error: (xhr, status) => {
                          commonPage.loadPageStatus('loadSuccess')
                          widget.toast('服务器异常')
                      },
                      noNetwork: () => {
                          commonPage.loadPageStatus('loadSuccess')
                          widget.toast('网络连接失败，请检查网络')
                      }
                  })
              }
              window.setKeywords = setKeywords
            },

            //组织架构成员
            tokqCalendar (userId){
              let str = `team_id=${this.teamId}&user_id=${userId}&project_id=${this.projectId}&date=${this.currentdate}`
              let encodeStr = encodeURIComponent(str)
              location.href = `dmsaas://KaoqinPersonal?urdData=${encodeStr}`
            }
        },
        created(){

            this.init();

        },
        ready() {

        }

    }

</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>
<style>
    #searchResult{
        top: 0px;
    }
</style>
